<template>
  <bs-dialog
    title="审核"
    class="examine"
    :visible="visible"
    @update:visible="updateVisible"
    :close-on-click-modal="!fetching"
    :close-on-press-escape="!fetching"
    :show-close="!fetching"
    @closed="doCloseEdit">
      <template slot="main">
        <div class="previews" v-if="publish">
          <div
            v-for="(item,index) in mediaList"
            :key="index"
            @dblclick="handleClick(item)"
            class="photo"
          >
          <!-- <img :src="item.thumbnailFile ? item.thumbnailFile : defaultImg[item.mediaType] ? defaultImg[item.mediaType] : defaultImg.default" /> -->
          <img :src="item.thumbnailFile ? item.thumbnailFile : defaultImg[item.type] ? defaultImg[item.type] : defaultImg.default" />
          <p>{{ item.name }}</p>
        </div>
        </div>
        <div class="examine-title" v-if="type === 'pubshow'">批注</div>
        <div class="examine-title" v-if="type === 'media'">请输入未通过原因：</div>
        <el-input type="textarea" v-model="examineDesc" rows="13" maxlength="100" resize="none" :show-word-limit="false" clearable></el-input>
      </template>
      <template slot="footer">
        <template v-if="type === 'pubshow'">
          <bs-confirm-button-icon :disabled="fetching||examined" @click.native="doExamine(1)"></bs-confirm-button-icon>
          <bs-refuse-button-icon :disabled="fetching||examined" :show-icon="false" @click.native="doExamine(-1)"></bs-refuse-button-icon>
          <bs-cancel-button-icon @click.native="cancelClick"></bs-cancel-button-icon>
        </template>
        <template v-if="type === 'media'">
          <bs-confirm-button-icon @click.native="doExamine(-1)"></bs-confirm-button-icon>
          <bs-cancel-button-icon size="mini" @click.native="cancelClick" />
        </template>
      </template>
  </bs-dialog>
</template>

<script>
import {fileTypeOpts, FILETYPE} from '../media-center/const'
import CommonApi from '@/api/common'
export default {
  name: 'examine-dialog',
  data(){
    return{
      examineDesc: '',
      fetching: false,
      defaultImg: {
        [FILETYPE.VIDEO]: require('@/assets/defaultImg/video.png'), // 视频
        [FILETYPE.AUDIO]: require('@/assets/defaultImg/music.png'), // 音频
        [FILETYPE.PICTURE]: require('@/assets/defaultImg/pic.png'), // 图片
        [FILETYPE.TEXT]: require('@/assets/defaultImg/text.png'), // 文本
        [FILETYPE.LOCAL_TEXT]: require('@/assets/defaultImg/oip.png'), // 本地文本
        [FILETYPE.QRCODE]: require('@/assets/defaultImg/oip.png'), // 二维码
        [FILETYPE.NET_PICTURE]: require('@/assets/defaultImg/screenshot.png'), // 网络图片
        [FILETYPE.NET_TEXT]: require('@/assets/defaultImg/webtext.png'), // 网络文本
        [FILETYPE.STREAM]: require('@/assets/defaultImg/streaming.png'), // 流媒体
        [FILETYPE.DVB]: require('@/assets/defaultImg/dvb.png'), // DVB频道
        [FILETYPE.WEB_CAPTURE]: require('@/assets/defaultImg/webpage.png'), // 网页截图
        [FILETYPE.FOLDER]: require('@/assets/defaultImg/oip.png'), // 文件夹
        default: require('@/assets/defaultImg/default.png') // 未知类型缺省图片
      },
    }
  },
  methods: {
    doCloseEdit() {
      this.$emit('closed')
    },
    updateVisible(v) {
      this.$emit('update:visible', v)
    },
    doExamine(val) {
      if(val === -1 && !this.examineDesc){
        this.$alert('提示', '请输入拒绝的原因')
        return
      }
      this.fetching = true
      this.$emit('examine', val, this.examineDesc, this.fetchingEndCb)
    },
    fetchingEndCb(stopClose) {
      this.fetching = false
      !stopClose && this.updateVisible(false)
    },
    cancelClick() {
      this.updateVisible(false)
    },
    handleClick(item) {
      console.log('handleClick',item)
      // this.$message.info('d')
      this.$emit('dbClick', item)
    },

  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      default: 'pubshow'
    },
    mediaList:{
      type:Array,
      default:()=>[]
    },
    publish:{
      type:Boolean,
      default:false
    },
    examined:{
      type:Boolean,
      default:false
    }
  },
  watch: {
    visible(v) {
      if (false === v) {
        this.examineDesc = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
    width: 500px;
    height: auto;
}
.examine-title {
  padding: 10px 0;
}
::v-deep .el-dialog__footer {
  border-top: 0;
}
.previews{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-y: scroll;
}
.photo {
  padding: 2px 5px;
  margin-right: 4px;
  margin-bottom: 6px;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;

  $img-width: 110px;
  $img-medium-width: 185px;
  $img-bsmall-width: 150px;
  $img-small-width: 128px;
  $img--small-width: 80px;


  img {
    display: block;
    width: $img--small-width;
    height: $img--small-width;
    margin:8px 0;
    height: 80px;
    object-fit: contain;
  }
  p {
    margin: 0 auto;
    text-align: center;
    font-size: 12px;
    width: 0.9 * $img-width;
    padding:4px 0 12px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &.medium {
    margin-right: 8px;
    img {
      width: $img-medium-width;
      height: 130px;
      margin-bottom: 5px;
    }
    p {
      width: 0.8 * $img-medium-width;
    }
  }

  &.bsmall {
    margin-right: 1px;
    margin-left: -5px;
    img {
      display: block;
      width: $img-bsmall-width;
      height: 130px;
      margin-bottom: 5px;
    }
    p {
      height: 32px;
      line-height: 32px;
      width: 0.8 * $img-bsmall-width;
    }
  }

  &.small {
    margin-right: -1px;
    img {
      display: block;
      width: $img-small-width;
      height: 100px;
      margin-bottom: 5px;
      object-fit: contain;
    }
    p {
      height: 32px;
      line-height: 32px;
      width: 0.8 * $img-small-width;
    }
  }


  &:hover {
    background: rgba(251, 158, 82, 0.3);
  }
  &.active {
    background: rgba(251, 158, 82, 0.6);
  }

}
</style>
